<template>
  <div class="addRole">
    <div class="btn-top">
      <div class="retu-btn" @click="$router.go(-1)">
        <img src="../../assets/images/ly/return.png" alt />
        <span>返回</span>
      </div>
    </div>
    <div class="formContent">
      <span class="span">基本信息</span>
      <el-form :model="addRoleForm" :rules="rules" ref="RoleFormRef">
        <el-form-item prop="name">
          <el-input v-model="addRoleForm.name" placeholder="角色名(必填)"></el-input>
        </el-form-item>
        <el-form-item prop="name">
          <el-select id="select" v-model="addRoleForm.PermissionType" placeholder="请选择权限范围(必填)">
            <el-option label="总后台端" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="describe">
          <el-input v-model="addRoleForm.describe" type="textarea" placeholder="描述"></el-input>
        </el-form-item>
      </el-form>
      <span class="span">功能权限</span>
      <div class="jurisdiction">
        <span class="hotai">总后台端</span>
        <i class="iSo"></i>
        <el-input placeholder="请输入内容" v-model="filterText" suffix-icon="el-icon-search"></el-input>
        <el-tree
          :filter-node-method="filterNode"
          ref="tree"
          :data="jurisdictionData"
          :highlight-current="true"
          :default-expand-all="true"
          @check="clickJuri"
          :check-strictly="true"
          show-checkbox
          node-key="id"
          :props="defaultProps"
        ></el-tree>
      </div>
      <button class="addBtn" @click="addRoleData">确认添加</button>
    </div>
  </div>
</template>
<script>
import { jurisdiction, addRoleData } from "../../utils/api";
export default {
  // 监听输入框
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      value: "",
      jurisdictionData: [],
      defaultProps: {
        children: "child",
        label: "name"
      },
      //   当前选中的节点
      keyData: 0,
      filterText: "",
      //   权限参数对象
      jurisdictionForm: {
        //   权限范围
        PermissionType: 1,
        UpTableNameLike: "",
        merchantNameLike: "",
        franchisingNameLike: "",
        merchantMoveNameLike: "",
        franchisingMoveNameLike: ""
      },
      //   角色添加对象
      addRoleForm: {
        userId: "",
        name: "",
        describe: "",
        PermissionType: "",
        powerId: ""
      },
      // 校验规则
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        PermissionType: [
          { required: true, message: "请选择权限范围", trigger: "blur" }
        ],
        describe: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
          { min: 1, max: 40, message: "长度在 1 到 4 个字符", trigger: "blur" }
        ]
      }
    };
  },
  components: {},
  methods: {
    filterNode(value, jurisdictionData) {
      if (!value) return true;
      return jurisdictionData.name.indexOf(value) !== -1;
    },
    getJurisdictionData() {
      this.postRequest(jurisdiction, this.jurisdictionForm).then(res => {
        if (res.code == 200) {
          this.jurisdictionData = res.data.UpTable;
        }
      });
    },
    // 点击复选框获取节点
    clickJuri() {
      // 获取被选中的权限节点
      let keyData = this.$refs.tree.getCheckedKeys();
      //   console.log(keyData);
      //   将节点id转成一个字符串存起来
      let strId = keyData.join(",");
      //   console.log(strId);
      this.addRoleForm.powerId = strId;
    },
    // 添加角色
    addRoleData() {
      this.$refs.RoleFormRef.validate(valid => {
        if (!valid) return false;
        if (this.addRoleForm.powerId == "")
          return this.$notify.error("请给该角色选择权限");
        //  console.log(this.addRoleForm);
        this.postRequest(addRoleData, this.addRoleForm).then(res => {
          if (res.code == 200) {
            this.$notify.success(res.msg);
            this.$refs.RoleFormRef.resetFields();
            this.addRoleForm.PermissionType = "";
            this.getJurisdictionData();
            this.$router.go(-1)
          }
        });
      });
    }
  },
  created() {
    this.addRoleForm.userId=window.sessionStorage.getItem("userId")
    this.getJurisdictionData();
    
  }
};
</script>
<style lang="less" scoped>
.addRole {
  border: 1px solid rgba(234, 237, 243, 1);
  background-color: white;
  margin: 18px;
  .btn-top {
    padding: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(234, 237, 243, 1);
    .retu-btn {
      cursor: pointer;
      width: 120px;
      height: 35px;
      background: rgba(0, 119, 248, 1);
      border: 1px solid rgba(1, 101, 209, 1);
      opacity: 1;
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      img {
        widows: 15px;
        height: 15px;
      }
      span {
        color: rgba(255, 255, 255, 1);
        margin-left: 13px;
      }
    }
  }
  .formContent {
    width: 40%;
    margin: 0 auto;
    margin-bottom: 30px;
    .span {
      font-size: 22px;
      font-family: Microsoft YaHei;
      color: rgba(62, 63, 66, 1);
      opacity: 1;
      margin-bottom: 25px;
      display: block;
    }
    .jurisdiction {
      width: 45%;
      border: 1px solid rgba(234, 237, 243, 1);
      padding: 20px;
      border-radius: 5px;
      .hotai {
        font-size: 16px;
        font-family: Microsoft YaHei;
        color: rgba(62, 63, 66, 1);
        opacity: 1;
        margin-bottom: 20px;
        display: block;
      }
      .iSo {
        display: block;
        width: 100%;
        height: 1px;
        border-top: 2px dashed black;
        margin-bottom: 15px;
      }
    }
  }
  .addBtn {
    display: block;
    width: 152px;
    height: 38px;
    background: rgba(0, 119, 248, 1);
    border: 1px solid rgba(1, 101, 209, 1);
    opacity: 1;
    border-radius: 4px;
    color: white;
    margin: 20px;
    margin-left: 80%;
    cursor: pointer;
  }
}
</style>